<!doctype html>
<html>

<head>
    <meta http-equiv="charset" charset="utf-8">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/common.css">
    <title>笔趣阁小说爬虫</title>
</head>

<body>
    <div id="spiderContainer" v-cloak>
        <h2 style="text-align:center;">笔趣阁小说爬虫</h2>
        <div class="row">
            <ul class="nav nav-tabs col-md-6 col-md-offset-3">
                <li id="writeNewNocel" role="presentation" class="active"><a href="javascript:void(0);">写入新的小说</a></li>
                <li id="appdenExistNovel" role="presentation"><a href="javascript:void(0);">续写已存在小说</a></li>
            </ul>
        </div>
        <div style="margin-top:10px;">
            <div class="row" v-if="writeNewFile">
                <div class="input-group col-md-6 col-md-offset-3">
                    <input type="text" class="form-control" id="novelUrl" name="novelUrl" v-on:keyup.13="writeFile">
                    <span class="input-group-btn">
                    <button class="btn btn-default" type="button" v-on:click="writeFile">开爬</button>
                </span>
                </div>
                <span class="col-md-6 col-md-offset-3">输入笔趣阁网站的小说，例如：http://www.biquzi.com/0_32/</span>
            </div>
            <div class="row" v-else>
                <div class="input-group col-md-6 col-md-offset-3">
                    <label for="novelUrl">小说网址：</label>
                    <input type="text" class="form-control" id="novelUrl" name="novelUrl">
                    <label for="filename">文件名称：</label>
                    <input type="text" class="form-control" id="filename" name="filename">
                    <label for="filename">起始章节id：</label>
                    <input type="text" class="form-control" id="currentSectionId" name="currentSectionId">
                    <button class="btn btn-default" type="button" v-on:click="appendExistFile">继续爬</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div v-if="isStart" class="col-md-6 col-md-offset-3">
                <span>写入文件名称：${writeFileName}</span><br/>
                <span>当前写入章节：${currentSection}</span><br/>
                <span>当前写入章节Id：${currentSectionId}</span>
            </div>
        </div>
        <div class="row">
            <div class="progress col-md-6 col-md-offset-3" style="margin-top:10px;padding:0;">
                <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" v-bind:style="progressBar">
                    ${process}%
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="/js/common/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/js/common/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/common/vue.js"></script>
    <script type="text/javascript" src="/js/home.js"></script>
</body>

</html>